import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import '../models/weather_model.dart';

class ForecastCard extends StatefulWidget {
  final CaiyunDailyForecast forecast;
  final VoidCallback onTap;

  const ForecastCard({
    super.key,
    required this.forecast,
    required this.onTap,
  });

  @override
  State<ForecastCard> createState() => _ForecastCardState();
}

class _ForecastCardState extends State<ForecastCard> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;
  bool _isFrontVisible = true;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0, end: 1).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _flipCard() {
    if (_isFrontVisible) {
      _controller.forward();
    } else {
      _controller.reverse();
    }
    _isFrontVisible = !_isFrontVisible;
  }

  Widget _buildFront() {
    return Container(
      width: 85,
      padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 4),
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.9),
        borderRadius: BorderRadius.circular(15),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 5,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 日期
          Text(
            _getDayOfWeek(widget.forecast.date),
            style: const TextStyle(
              fontSize: 9,
              fontWeight: FontWeight.w500,
              color: Colors.grey,
            ),
          ),
          
          const SizedBox(height: 1),
          
          // 天气图标
          Icon(
            _getWeatherIcon(widget.forecast.skycon),
            size: 20,
            color: Colors.blue,
          ),
          
          const SizedBox(height: 1),
          
          // 天气描述
          Text(
            _getWeatherDescription(widget.forecast.skycon),
            style: const TextStyle(
              fontSize: 7,
              color: Colors.grey,
            ),
            textAlign: TextAlign.center,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
          
          const SizedBox(height: 2),
          
          // 温度范围
          Column(
            children: [
              Text(
                '${widget.forecast.maxTemp.round()}°',
                style: const TextStyle(
                  fontSize: 11,
                  fontWeight: FontWeight.bold,
                  color: Colors.black87,
                ),
              ),
              Text(
                '${widget.forecast.minTemp.round()}°',
                style: const TextStyle(
                  fontSize: 9,
                  color: Colors.grey,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildBack() {
    return Container(
      width: 85,
      padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 4),
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.9),
        borderRadius: BorderRadius.circular(15),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 5,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 空气质量
          const Text(
            '空气质量',
            style: TextStyle(
              fontSize: 9,
              fontWeight: FontWeight.w500,
              color: Colors.grey,
            ),
          ),
          const SizedBox(height: 4),
          Text(
            'AQI: ${widget.forecast.aqi}',
            style: const TextStyle(
              fontSize: 11,
              fontWeight: FontWeight.bold,
              color: Colors.black87,
            ),
          ),
          const SizedBox(height: 8),
          // 点击查看详情提示
          const Text(
            '点击查看详情',
            style: TextStyle(
              fontSize: 7,
              color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) => _flipCard(),
      onExit: (_) => _flipCard(),
      child: GestureDetector(
        onTap: widget.onTap,
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            final transform = Matrix4.identity()
              ..setEntry(3, 2, 0.001)
              ..rotateY(3.14159 * _animation.value);
            return Transform(
              transform: transform,
              alignment: Alignment.center,
              child: _isFrontVisible ? _buildFront() : _buildBack(),
            );
          },
        ),
      ),
    );
  }

  String _getDayOfWeek(DateTime date) {
    final now = DateTime.now();
    final today = DateTime(now.year, now.month, now.day);
    final targetDate = DateTime(date.year, date.month, date.day);
    
    if (targetDate == today) {
      return '今天';
    } else if (targetDate == today.add(const Duration(days: 1))) {
      return '明天';
    } else {
      switch (date.weekday) {
        case 1:
          return '周一';
        case 2:
          return '周二';
        case 3:
          return '周三';
        case 4:
          return '周四';
        case 5:
          return '周五';
        case 6:
          return '周六';
        case 7:
          return '周日';
        default:
          return DateFormat('MM/dd').format(date);
      }
    }
  }

  IconData _getWeatherIcon(String skycon) {
    switch (skycon) {
      case 'CLEAR_DAY':
        return Icons.wb_sunny;
      case 'CLEAR_NIGHT':
        return Icons.nightlight_round;
      case 'PARTLY_CLOUDY_DAY':
      case 'PARTLY_CLOUDY_NIGHT':
        return Icons.cloud;
      case 'CLOUDY':
        return Icons.cloud;
      case 'LIGHT_HAZE':
      case 'MODERATE_HAZE':
      case 'HEAVY_HAZE':
        return Icons.waves;
      case 'LIGHT_RAIN':
      case 'MODERATE_RAIN':
      case 'HEAVY_RAIN':
      case 'STORM_RAIN':
        return Icons.grain;
      case 'LIGHT_SNOW':
      case 'MODERATE_SNOW':
      case 'HEAVY_SNOW':
      case 'STORM_SNOW':
        return Icons.ac_unit;
      case 'DUST':
      case 'SAND':
        return Icons.waves;
      case 'FOG':
        return Icons.waves;
      case 'WIND':
        return Icons.air;
      default:
        return Icons.wb_sunny;
    }
  }

  String _getWeatherDescription(String skycon) {
    switch (skycon) {
      case 'CLEAR_DAY':
        return '晴天';
      case 'CLEAR_NIGHT':
        return '晴夜';
      case 'PARTLY_CLOUDY_DAY':
        return '多云';
      case 'PARTLY_CLOUDY_NIGHT':
        return '多云';
      case 'CLOUDY':
        return '阴天';
      case 'LIGHT_HAZE':
        return '轻度雾霾';
      case 'MODERATE_HAZE':
        return '中度雾霾';
      case 'HEAVY_HAZE':
        return '重度雾霾';
      case 'LIGHT_RAIN':
        return '小雨';
      case 'MODERATE_RAIN':
        return '中雨';
      case 'HEAVY_RAIN':
        return '大雨';
      case 'STORM_RAIN':
        return '暴雨';
      case 'LIGHT_SNOW':
        return '小雪';
      case 'MODERATE_SNOW':
        return '中雪';
      case 'HEAVY_SNOW':
        return '大雪';
      case 'STORM_SNOW':
        return '暴雪';
      case 'DUST':
        return '浮尘';
      case 'SAND':
        return '沙尘';
      case 'FOG':
        return '雾';
      case 'WIND':
        return '大风';
      default:
        return '未知';
    }
  }
} 
